<template>
	<view class="">
		<view class="box">
			<view class="flex order-lesson">
				<view class="f1 flex">
					<image v-if="detail && detail.course" :src="$img(detail.course.cover)" mode="aspectFill" class="order-img" />
					<view class="lesson-info between column">
						<view class="">
							<view v-if="detail && detail.course">{{ detail.course.title }}</view>
							<view class="gray" v-if="detail && detail.course">课程类型：{{ detail.course.class.name || '默认' }}</view>
						</view>
						<text class="price-util gray" v-if="detail && detail.number">x{{ detail.number }}</text>
					</view>
				</view>
				<view v-if="detail && detail.number">
					<stepper :num="detail.number" @changeNum="changeNum"></stepper>
				</view>
			</view>

			<view class="order-info">
				<view class="order-info-item flex" v-for="(v,i) in list" :key="i">
					<view class="">{{ v.name }}</view>
					<view class="f1" v-if="!v.isPrice" :class="{'bold': v.bold }">{{ v.value }}</view>
					<view class="f1 price" v-else>
						<text class="price-util">￥</text>
						<text>{{ v.value }}</text>
						<text class="price-util">/次</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import stepper from '@/components/stepper.vue'
	export default {
		components: {
			stepper
		},
		data() {
			return {
				num: 1,
				list: [],
				id: '',
				detail: null,
			}
		},
		onLoad(e) {
			this.id = e.id;
			// this.getDetail();
		},
		computed: {
			
		},
		methods: {
			async getDetail() {
				let res = await this.$api.get(`crm/course_order/detail/${this.id}`);
				if(res.code == 200) {
					this.detail = res.data;
					this.watchDetail();
				}
			},
			watchDetail() {
				const {detail} = this;
				if(detail) {
					this.list = [
						{
							name: '位置',
							value: detail.course.location || '暂未更新位置',
						},
						{
							name: '课程时间',
							value: detail.course.start_at,
						},
						{
							name: '课程教练',
							value: detail.course.coach.name,
						},
						{
							name: '购买获得东东',
							value: detail.course.dd,
							bold: true,
						},
						{
							name: '实付金额',
							value: detail.total,
							isPrice: true,
						},
					]
				}
			},
			changeNum() {
				uni.showToast({
					title: '暂无法进行此操作',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	.box {
		margin: 20rpx 0;
		padding: 40rpx 27rpx;
		padding-left: 33rpx;
		background-color: #FFF;
	}
	.order-lesson{
		align-items: flex-end;
		.order-img {
			width: 133rpx;
			height: 133rpx;
			background-color: #f7f7f7;
			margin-right: 24rpx;
			border-radius: 16rpx;
		}
		.lesson-info {
			font-size: 29rpx;
			.gray {
				color: #B3B3B3;
				font-size: 26rpx;
			}
			
		}
	}
	.order-info{
		margin: 40rpx 0;
		margin-bottom: 0;
		font-size: 27rpx;
		.order-info-item {
			line-height: 60rpx;
			.f1 {
				text-align: right;
				color: #808080;
			}
			.bold {
				font-weight: bold;
				color: #333;
			}
		}
	}
	.price {
		color: #F51B1B !important;
		font-weight: bold;
		font-size: 32rpx;
		.price-util {
			font-size: 20rpx;
			font-weight: normal;
		}
	}
	
</style>